<template>
  <section class="component basic-information-customers">
    <ul>
      <li>
        <span>客户姓名：</span>
        <span>{{ model.personalName }}</span>
      </li>
      <li>
        <span>客户号：</span>
        <span>{{ model.personalNo }}</span>
      </li>
      <li>
        <span>英文名：</span>
        <span>{{ model.englishName }}</span>
      </li>
      <li>
        <span>出生日期：</span>
        <span>{{ model.birthday | dateFormat }}</span>
      </li>
      <li>
        <span>性别：</span>
        <span>{{ model.sex | dictConvert("Sex") }}</span>
      </li>
      <li>
        <span>证件类型：</span>
        <span>{{ model.idType | dictConvert("PersonalIdType") }}</span>
      </li>
      <li>
        <span>证件号码：</span>
        <span>{{ model.idCard }}</span>
      </li>
      <li>
        <span>婚姻状况：</span>
        <span>{{ model.marital | dictConvert("Marital") }}</span>
      </li>
      <li>
        <span>客户总账户数：</span>
        <span>{{ model.totalAccounts }}</span>
      </li>
      <li>
        <span>客户归并逾期总金额：</span>
        <span>{{ model.overdueAmount && `${model.overdueAmount}元` }}</span>
      </li>
      <li>
        <span>客户归并延滞阶段：</span>
        <span>{{ model.overduePeriod }}</span>
      </li>
      <li>
        <span>归并历史最高逾期期数：</span>
        <span>{{ model.historyMaxOverduePeriod }}</span>
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {}
})
export default class BasicnformationCustomers extends Vue {
  @CollectionExecutionModule.State private caseId;
  @Prop() private model;
}
</script>
<style lang="less" scoped>
.component.basic-information-customers {
  padding: 5px 5px 5px 0px;
  .padding-bottom-8 {
    padding-bottom: 8px;
    .name {
      color: #606266;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    font-size: 12px;
    flex-wrap: wrap;
    li {
      width: 49%;
      list-style: none;
      padding-bottom: 10px;
    }
  }
}
</style>
